<extend name="./Public/base" />
<block name="title">班级管理</block>
<block name="head">
    <load href="__PUBLIC__/Css/classes.css"/>
</block>
<block name="header">
    <include file="Application/Home/View/Public/header_tea.html"/>
</block>
<block name="main">
    <div class="alert alert-danger hidden" role="alert"></div>
    <div class="alert alert-success hidden" role="alert"></div>
    <div class="container-fluid" id="class-container">
        <div class="row">
            <div class="col-sm-3">
                <button class="btn btn-link add-class" id="add-class" data-toggle="modal" data-target="#add-class-modal">
                    <span class="glyphicon glyphicon-plus"></span> 创建班级
                </button>
            </div>
            <div class="col-sm-offset-7 col-sm-2">
                <select class="form-control choose-course">
                    <option value="all">全部课程</option>
                    <volist name="courses" id="cou">
                        <option value="{$cou.cou_id}">{$cou.cou_name}</option>
                    </volist>
                </select>
            </div>
        </div>
        <div class="row">
            <if condition="($classes | count) gt 0">
                <volist name="classes" id="cla">
                    <div class="col-lg-3">
                        <div class="panel class-panel" value="{$cla.cla_id}">
                            <div class="panel-heading">
                                <h1 class="panel-title text-ellipsis">
                                    <a title="{$cla.cla_name} - {$cla.cou_name}" href="__MODULE__/TeaClass/classStuInfo?cad={$cla.cla_id}">{$cla.cla_name} - {$cla.cou_name}</a>
                                </h1>
                                <div class="dropdown pull-right">
                                    <a class="class-edit dropdown-toggle" href="javascript:;" data-toggle="dropdown"><span class="glyphicon glyphicon-menu-hamburger"></span></a>
                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                        <li><a href="javascript:;" class="menu-class-edit" data-toggle="modal" data-target="#edit-class-modal">编辑</a></li>
                                        <li><a href="javascript:;" class="menu-class-file">归档</a></li>
                                        <li><a href="javascript:;" class="menu-class-delete">删除</a></li>
                                    </ul>
                                </div>
                                <p><small>开始:{$cla.cla_start} 结束:{$cla.cla_end}</small></p>
                            </div>
                            <div class="panel-body">
                                <p class="text-muted">近期测试</p>
                                <foreach name="cla['quiz']" item="qus">
                                    <p class="last-quiz"><a href="__MODULE__/TeaQuiz/question?qd={$qus.qus_id}">{$qus.qus_name}</a></p>
                                </foreach>
                                <a class="stu-num" href="__MODULE__/TeaClass/classStuInfo?cad={$cla.cla_id}">
                                    <span class="glyphicon glyphicon-user"></span>学生{$cla.cla_stu_num}</a>
                            </div>
                        </div>
                    </div>
                </volist>
            <else />
                <div class="col-md-6 col-md-offset-3 display-hint class-hint">
                    <p>点击上方创建班级按钮创建一个班级</p>
                </div>
            </if>
        </div>
        <!-- 编辑班级信息 -->
        <div class="modal fade" id="edit-class-modal" role="dialog" aria-labelledby="edit-class">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">编辑班级</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">课程名称</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" placeholder="请输入班级名称"
                                       required>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">开课时间</label>
                                <div class="col-sm-6">
                                    <input type="date" class="form-control" required/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">结束时间</label>
                                <div class="col-sm-6">
                                    <input type="date" class="form-control" required/>
                                </div>
                            </div>
                            <div class="form-group" id="addClass-auto">
                                <label class="col-sm-2 control-label">审核方式</label>
                                <div class="col-sm-6">
                                    <label class="radio-inline">
                                        <input type="radio" value="false" name="auto" checked/>手动审批
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" value="true" name="auto"/>自动审批
                                    </label>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        <!-- 添加班级 -->
        <div class="modal fade" id="add-class-modal" role="dialog" aria-labelledby="add-class">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">添加班级</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">课程名称</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="class_name" placeholder="请输入班级名称"
                                       required>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">选择课程</label>
                                <div class="col-sm-6">
                                    <select class="form-control" id="ac-cou-id">
                                        <volist name="courses" id="cou">
                                            <option value="{$cou.cou_id}">{$cou.cou_name}</option>
                                        </volist>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">开课时间</label>
                                <div class="col-sm-6">
                                    <input type="date" class="form-control"  id="start_time" required/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">结束时间</label>
                                <div class="col-sm-6">
                                    <input type="date" class="form-control"  id="end_time" required/>
                                </div>
                            </div>
                            <div class="form-group" id="addClass-auto">
                                <label class="col-sm-2 control-label">审核方式</label>
                                <div class="col-sm-6">
                                    <label class="radio-inline">
                                        <input type="radio" value="false" name="auto" checked/>手动审批
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" value="true" name="auto"/>自动审批
                                    </label>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button id="btn-add-class" type="button" class="btn btn-primary">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 删除班级modal -->
        <div class="modal fade" id="del-class-modal" role="dialog" aria-labelledby="del-class">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title text-danger">删除班级</h4>
                    </div>
                    <div class="modal-body">
                        <p>是否删除班级</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button id="btn-class-del" type="button" class="btn btn-danger">删除</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function(){
            
            var bgcolors = new Array("default", "info", "primary", "warning", "danger", "success");
            var panels = $(".class-panel");
            var menu_class_edit = $(".menu-class-edit");
            var btn_edit_class = $("#btn-edit-class");
            var btn_add_class = $("#add-class");
            var btn_add_class_submit = $("#btn-add-class") // modal内确认添加班级按钮

            // 添加班级内表单对象
            var obj_cla_name = $("#class_name");
            var obj_cla_start = $("#start_time");
            var obj_cla_end = $("#end_time");
            var obj_is_auto = $("#addClass-auto");

            var obj_cur_class ={}; // 当前操作的班级对象

            // 删除班级按钮
            var menu_class_delete = $(".menu-class-delete");
            var btn_class_del = $("#btn-class-del");

            var choose_course = $("#class-container .choose-course"); // 下拉框对象
            if (location.search.length > 0)
                choose_course.val(location.search.substring(1).split("=")[1]);

            // 监听下拉框选择事件
            choose_course.change(function() {
                var query = "";
                if ($(this).val() != "all")
                    query = "?cd="+$(this).val();
                location.href = "__MODULE__/TeaClass/classes" + query;
            });

            // 为每个panel设置颜色
            panels.each(function() {
                var num = parseInt($(this).attr("value")) % 6;
                $(this).addClass("panel-"+bgcolors[num]);
            });

            // 弹出添加班级modal
            btn_add_class.click(function() {
                $(this).blur();
                // 初始化添加班级表单日期
                var now = new Date();
                obj_cla_start.val(getDate(now));
                now.setDate(now.getDate()+1);
                obj_cla_end.val(getDate(now));
            });

            // 提交添加班级表单
            btn_add_class_submit.click(function() {
                var cla_name = obj_cla_name.val();
                var cla_start = obj_cla_start.val();
                var cou_id = $("#ac-cou-id").val();
                var cla_end = obj_cla_end.val();
                var is_auto = obj_is_auto.find(":checked").val();
                if(is_auto){
                    is_auto = 1;
                }
                else{
                    is_auto = 0;
                }
                if (cla_name === "") {
                    showError("班级名称不能为空");
                    obj_cla_name.focus();
                    return;
                }
                if (cla_end <= cla_start) {
                    showError("结束时间不能早于开始时间");
                    obj_cla_end.focus();
                }

                postData={cou_id:cou_id, cla_name:cla_name, cla_start:cla_start, cla_end:cla_end, is_auto:is_auto};
                postApi("__MODULE__/TeaClass/addClass", postData, function(err, data) {
                    if (err) {
                        showError(err.message);
                    } else {
                        showSuccessReload(data.message);
                        $("#add-class-modal").modal("toggle");
                    }
                });
            });
            
            // 弹出编辑班级modal
            menu_class_edit.click(function() {
                var edit_cla_panel = $(this).parents(".panel");
                var edit_class_id = edit_cla_panel.attr("value");
            });

            // 判断是否可以删除并弹出modal
            menu_class_delete.click(function() {
                obj_cur_class.id = $(this).parents(".panel").attr("value");
                obj_cur_class.name = $(this).parents(".panel-heading").find(".panel-title a").text();
                postApi("__MODULE__/TeaClass/checkIsDelete", {cla_id:obj_cur_class.id}, function(err, data) {
                    if (err) {
                        showError(err.message);
                    } else {
                        $("#del-class-modal").modal("toggle");
                        $("#del-class-modal").find(".modal-body p").text("是否删除班级 " + obj_cur_class.name);
                    }
                });
            });

            // 确认删除
            btn_class_del.click(function() {
                
                postApi("__MODULE__/TeaClass/deleteClass", {cla_id:obj_cur_class.id}, function(err, data) {
                    if (err) {
                        showError(err.message);
                    } else {
                        showSuccessReload(data.message);
                        $("#del-class-modal").modal("toggle");
                    }
                });
            });

            // 归档班级
            $(".class-panel .menu-class-file").click(function() {
                var cla_id = $(this).parents(".panel").attr("value");
                postApi("__MODULE__/TeaClass/fileClass", {cla_id:cla_id}, function(err, data) {
                    if (err) {
                        showError(err.message);
                    } else {
                        showSuccessReload(data.message);
                    }
                });
            });
        });
    
        // 用参数time生成YYYY-MM-DD格式的日期
        function getDate(time) {
            var year, month, date;
            year = time.getFullYear();
            month = (time.getMonth()+1)+"";
            month = month.length<2 ? "0"+month : month;
            date = time.getDate()+"";
            date = date.length<2 ? "0"+date : date;
            return year+"-"+month+"-"+date;
        }
    </script>
</block>
